<template>
	<view class="container login_container">
		<view class="login_content">
			<view class="login_logo"></view>
			<view class="login_main_type">
				<img src="http://www.atguigu.com/images/index_new/logo.png" alt="" class="login-img" mode="widthFix">
				<button class="login_main_type_item" @click="toLogin">

					<text>微信登陆</text>
				</button>
			</view>
		</view>
		<view class="login_footer">
			<view class="login_protocol">
				<view :class="['login_check_icon', isChecked&&'checked']" @click="isChecked=!isChecked"></view>
				<view class="login_block">
					我已阅读并同意
					<navigator class="link">用户协议</navigator>
					和
					<navigator class="link">隐私声明</navigator>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang='ts' setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import CodeApi from '../../../../my-uniapp/src/Api/login'
	import {
		ref
	} from 'vue'
	const isChecked = ref(false)
	const toLogin = async () => {
		if (isChecked.value) {
			//判断同意协议的单选框是否为true
			uni.login({
				success: res => {
					//这里res内有code 把code发送给服务器 服务器返回token
					toGetcode(res.code)
				}
			})
		} else {
			//提示框
			uni.showToast({
				title: '请阅读协议!'
			})
		}
	}
	const toGetcode = async (code) => {
		const result = await CodeApi.getCodeData(code)
		console.log(result)
		if (result.code === 200) {
			uni.setStorageSync('token', result.data.token)
			uni.navigateBack()
		}
	}
	onLoad(() => {
		// toGetcode()
	})
</script>
<style lang='less' scoped>
	.login_container {
		background: hotpink;
		border-top: 1rpx solid #eee;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;

		.login_content {
			padding: 0 36px;
			width: 100%;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 48px;

			.login_logo {
				width: 72px;
				height: 72px;
			}

			.login_main_type {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 48px;
				.login-img{
					padding: 50px;
					width: 50%;
				}
				.login_main_type_item {
					height: 56px;
					margin-bottom: 24px;
					border-radius: 30px;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80%;
					text-align: center;

					image {
						width: 26px;
						height: 26px;
					}

					text {
						margin-left: 8px;
						color: #333;
						font-size: 18px;
					}
				}
			}

			.login_more {
				color: #fff;
				font-size: 14px;
			}
		}

		.login_footer {
			.login_protocol {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;

				.login_block {
					display: flex;
					color: #333;
				}

				.login_check_icon {
					width: 24px;
					height: 24px;
					background-repeat: no-repeat;
					background-size: 24px 48px;
					background-image: url('https://8.idqqimg.com/edu/mobilev2/m-core/1f3256dafe9eb438879b434bd4105394.png');
					background-position: 0 0;

					&.checked {
						background-position: 0 -24px;
					}
				}

				.link {
					color: #fff;
				}
			}
		}
	}
</style>